<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义js对象</title>
</head>
<body>
<table border="1">
    <caption>商品表</caption>

    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr = [
        {title:'小米14',price:4300,num:1000},
        {title:'华为mate60',price:6600,num:3000},
        {title:'苹果16',price:8900,num:3699},
        {title:'vivo',price:4300,num:1000}
    ];


    for(let i = 0 ;i<productArr.length;i++){
        let tableE = document.querySelector('table');
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        tableE.append(tr);
        tr.append(td1);
        tr.append(td2);
        tr.append(td3);
        let td_title = productArr[i].title;
        let td_price = productArr[i].price;
        let td_num = productArr[i].num;
        td1.append(td_title);
        td2.append(td_price);
        td3.append(td_num);
    }
</script>
</body>
</html>